<template>
	<view class="w-100 bg-f6f7 min-vh-100">
		<catalogue></catalogue>
		<view class="banner w-100" :style="{'background-image': `url(${cosUrl}/bg/mybanner.png)`, 'z-index': 3}">
			<view class="position-relative geren d-flex justify-content-center items-center flex-column"
				style=" z-index: 10;">
				<!-- #ifdef H5 -->
				<view v-if="vuex_has_login" class="tou" :style="{backgroundImage: `url(${vuex_user.avatar ? vuex_user.avatar : '/h5/static/website/nologin_avatar.svg'})`}"></view>
				<view v-else class="tou" :style="{backgroundImage: 'url(/h5/static/website/nologin_avatar.svg)'}" @click="$u.throttle(weblogin)"></view>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<view v-if="vuex_has_login" class="tou" :style="{backgroundImage: `url(${vuex_user.avatar ? vuex_user.avatar : cosUrl + '/bg/nologin_avatar.svg'})`}"></view>
				<view v-else class="tou" :style="{backgroundImage: `url(${cosUrl}/bg/nologin_avatar.svg)`}" @click="$u.throttle(wx_login)"></view>
				<!-- #endif -->
				

				<view v-if="vuex_has_login" class="text-cfff pt-2">
					{{vuex_user.nickname | substring(4) }}
				</view>
				
				<!-- #ifdef H5 -->
				<view v-else class="text-cfff pt-2" @click="$u.throttle(weblogin)">
					点击登陆
				</view>
				<!-- #endif -->
				
				<!-- #ifdef MP -->
				<view v-else class="text-cfff pt-2" @click="$u.throttle(wx_login)">
					点击登陆
				</view>
				<!-- #endif -->

			</view>
		</view>
		<view class="p-2 pt-4">
			<view class="bg-cfff brs-16rpx">
				<view class="d-flex justify-content-between align-items-center p-3" hover-class="hover" @click="gotoExampleSaveListPage">
					<view class="d-flex items-center">
						<image class="img-48rpx" src="../../static/website/shouc.svg" mode=""></image>
						<view class="text-32rpx pl-3">
							案例收藏<text v-if="vuex_has_login">（{{vuex_saveexample.length}}）</text>
						</view>
					</view>
					<image class="img-48rpx" src="../../static/website/youjiantou.svg" mode=""></image>
				</view>
				<view class="lt-line"></view>
				<view class="d-flex justify-content-between align-items-center p-3 " hover-class="hover" @click="gotoBlogSaveListPage">
					<view class="d-flex items-center">
						<image class="img-48rpx" src="../../static/website/my_article.svg" mode=""></image>
						<view class="text-32rpx pl-3">
							文章视频收藏<text v-if="vuex_has_login">（{{vuex_saveblog.length}}）</text>
						</view>
					</view>
					<image class="img-48rpx" src="../../static/website/youjiantou.svg" mode=""></image>
				</view>
			</view>
		</view>
		<view class="p-2 pt-3"  @click="$u.throttle(logout)" v-if="vuex_has_login">
			<view class="bg-cfff brs-16rpx">
				<view class="d-flex align-items-center p-3">
					<view class="d-flex items-center">
						<image class="img-48rpx" src="../../static/website/logout.svg" mode=""></image>
						<view class="text-32rpx pl-3 text-C0C4CC">
							退出
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shouc: 34,
				shouc2: 67
			}
		},
		onLoad() {
			uni.hideShareMenu()
		},
		methods: {
			gotoExampleSaveListPage() {
				if (!this.vuex_has_login) {
					uni.showToast({
						title: '请先登录，再操作',
						icon: 'none',
						duration: 2000,
					});
					return
				}
				uni.navigateTo({
					url:'/pages/website/savedexample'
				})
			},
			gotoBlogSaveListPage() {
				if (!this.vuex_has_login) {
					uni.showToast({
						title: '请先登录，再操作',
						icon: 'none',
						duration: 2000,
					});
					return
				}
				uni.navigateTo({
					url:'/pages/website/savedblog'
				})
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
				wx.hideHomeButton()
			// #endif
		},
	}
</script>

<style scoped lang="scss">
	.banner {
		height: 546rpx;
		background-size: 100% 100%;

		.geren {
			height: 546rpx;

			.tou {
				height: 160rpx;
				width: 160rpx;
				background-size:contain;
				background-repeat: no-repeat;
				border-radius: 50%;
			}
		}

	}

	.bg-f6f7 {
		background: #F6F7FB;
	}

	.lt-line {
		width: 100%;
		height: 1px;
		background: #F0F0F0;
	}
	.hover{
		background: #F2F2F2;
	}
</style>
